// UserActions 组件的 HTML 模板

import {localStore} from "../../../Store/localStore";

export function render(shadowRoot, css) {

    console.log(localStore.get("token"));

    shadowRoot.innerHTML = `
        <style>${css}</style>
        <div class="user-actions" part="user-actions">
            ${
                localStore.get("token") ?
                    renderUnloggedOutState() :
                    renderLoggedOutState()
            }
        </div>
    `;
}

export function renderLoggedOutState() {
    return `
        <div class="login-section">
            <div class="action-buttons-container">
                <sl-tooltip content="充值" placement="bottom">
                    <sl-button variant="default" size="medium" class="action-btn">
                        <sl-icon name="currency-dollar"></sl-icon>
                    </sl-button>
                </sl-tooltip>
                
                <sl-tooltip content="通知" placement="bottom">
                    <sl-button variant="default" size="medium" class="action-btn">
                        <sl-icon name="envelope-open"></sl-icon>
                    </sl-button>
                </sl-tooltip>
                
                <sl-tooltip content="私信" placement="bottom">
                    <sl-button variant="default" size="medium" class="action-btn">
                        <sl-icon name="chat-text"></sl-icon>
                    </sl-button>
                </sl-tooltip>
                
                <sl-tooltip content="发布" placement="bottom">
                    <sl-button id="publish" variant="default" size="medium" class="action-btn">
                        <sl-icon name="plus-square-dotted"></sl-icon>
                    </sl-button>
                </sl-tooltip>
            </div>
            
            <sl-button id="login" variant="default" size="medium" class="login-btn">
                <sl-icon name="person-circle" slot="prefix" class="primary-icon"></sl-icon>
                <span>登录</span>
            </sl-button>
        </div>
    `;
}



export function renderUnloggedOutState() {
    const userinfo = localStore.get('userinfo');

    return `
        <div class="login-section">
            <div class="action-buttons-container">
                <sl-tooltip content="充值" placement="bottom">
                    <sl-button variant="default" size="medium" class="action-btn">
                        <sl-icon name="currency-dollar"></sl-icon>
                    </sl-button>
                </sl-tooltip>
                
                <sl-tooltip content="通知" placement="bottom">
                    <sl-button variant="default" size="medium" class="action-btn">
                        <sl-icon name="envelope-open"></sl-icon>
                    </sl-button>
                </sl-tooltip>
                
                <sl-tooltip content="私信" placement="bottom">
                    <sl-button variant="default" size="medium" class="action-btn">
                        <sl-icon name="chat-text"></sl-icon>
                    </sl-button>
                </sl-tooltip>
                
                <sl-tooltip content="发布" placement="bottom">
                    <sl-button id="publish" variant="default" size="medium" class="action-btn">
                        <sl-icon name="plus-square-dotted"></sl-icon>
                    </sl-button>
                </sl-tooltip>
            </div>
            
            <div>
                <sl-avatar
                  image="${userinfo.avatar}"
                  label="Avatar of a gray tabby kitten looking down"
                ></sl-avatar>
                <span>${userinfo.email}</span>
            </div>
            
        </div>
    `;
}